<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 800px;
            height: 50px;
            list-style: none;
            display: flex;
            margin: 10px auto;
            border: 1px solid red;
        }
        li{
            flex: 1;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">
        <ul>
               <!-- li:v-for循环创建出来的 -->
            <!-- index:每一个元素的索引值!!!!index这玩意在项目当中经常会用到
                 ref="index",代表全部li的ref属性值都是字符串index
                 :ref="index",代表的是li的ref属性值【0-9】
             -->

            <li v-for="(item,index) in arr" :key="index" @click="handle(index)" :ref="index">{{item.title}}</li>
        </ul>
    </div>
</body>

</html>
<script>
    //关联VM
    const VM = new Vue({
        el: '#app',
        data: {
            arr: [
                { id: 1, title: '鲁班大师' },
                { id: 2, title: '鲁班大师' },
                { id: 3, title: '鲁班大师' },
                { id: 4, title: '鲁班大师' },
            ]
        },
        methods:{
            handle(index){
                   //点击谁，谁的背景颜色为红色，可以利用event事件对象target处理
             //为什么使用中括号
             /*
                let index = 0;
                let obj = {0:'我爱你',1:'我恨你'};
                console.log(obj.index);//代表的是获取对象index的属性的属性值
                console.log(obj[index]);//这代表的是获取对象K为0的属性值
             */
                this.$refs[index][0].style.background = 'pink'

            }
        }
    })
</script>